import { useSelector, useDispatch } from "react-redux";
import { increment, asyncincrement } from "./store/features/counterSlice";

const App = () => {
    const count = useSelector((state) => state.counter.count);
    const dispatch = useDispatch();
    return (
        <>
            <div className='page-header'>
                <h1>
                    Redux <small>@redux/toolkit</small>
                </h1>
            </div>
            <div className='page-content'>
                <div className='wrapper wrapper1'>
                    <div className='alert alert-danger'>
                        当前counts的值为：{count}
                    </div>
                    <div className='btn-group'>
                        <div
                            className='btn btn-default'
                            onClick={() => dispatch(increment(2))}
                        >
                            同步增加
                        </div>
                        <div
                            className='btn btn-danger'
                            onClick={() => dispatch(asyncincrement(2))}
                        >
                            异步增加
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default App;
